---
import CarouselImg from "./CarouselImg.astro";
import CarouselItem from "./CarouselItem.astro";
const {articleListExp}=Astro.props 
---

<CarouselItem>
      <th:block
      th:each={articleListExp}
      th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}"
    >
      <CarouselImg
        imgSrc="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
        imgAlt="${article.articleTitle}"
      />
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <a th:href="${webConfig['oly.web.domain']+'/article/'+article.articleId}"
          class="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl"
        >
          <span th:text="${article.articleTitle}"
            class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400"
            >Better Data</span
          >
       </a>
        <p
          class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400"
        >
          Here at Flowbite we focus on markets where technology, innovation, and
          capital can unlock long-term value and drive economic growth.
        </p>
      </div>
  </th:block>
</CarouselItem>
